.login-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1890ff 0%, #69c0ff 50%, #ffffff 100%);
}

.login-container::before,
.login-container::after {
  z-index: 0;
  content: '';
  position: absolute;
  left: -50%;
  width: 200%;
  height: 200%;
  border-radius: 45%;
  animation-duration: 15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.2) 35%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.2) 65%,
    rgba(255, 255, 255, 0) 80%
  );
}

.login-container::before {
  bottom: -100%;
  transform-origin: center center;
  animation-name: wave1;
}

.login-container::after {
  bottom: -120%;
  transform-origin: center center;
  animation-name: wave2;
  animation-delay: -4s;
}

@keyframes wave1 {
  from {
    transform: rotate(0deg) translateY(0) scale(1, 0.8);
  }
  50% {
    transform: rotate(180deg) translateY(-2%) scale(1.1, 1);
  }
  to {
    transform: rotate(360deg) translateY(0) scale(1, 0.8);
  }
}

@keyframes wave2 {
  from {
    transform: rotate(0deg) translateY(0) scale(1, 0.9);
  }
  50% {
    transform: rotate(180deg) translateY(-1%) scale(1, 1.1);
  }
  to {
    transform: rotate(360deg) translateY(0) scale(1, 0.9);
  }
}
